<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>AIC</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
	</head>

	<body>

		<style>
			[v-cloak] {
				display: none;
			}
			
			html,body{
				height: 100%;
				background-color: white;
			}
			
			.mui-content,
			.mui-slider,
			.mui-slider-group {
				height: 100%;
			}
			
			.mui-table-view {
				padding-bottom: 90px;
			}
			
			.mui-control-content {
				background-color: white;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #27CDDB;
				border-bottom: 2px solid #27CDDB;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				background-color: #27CDDB;
			}
			
			.mui-bar-nav {
				background: #27CDDB;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-icon-reload {
				color: #FFFFFF;
			}
		</style>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" onclick="vm.refresh()"><span class="mui-icon mui-icon-reload"></span></a>
			<h1 class="mui-title">收支明细</h1>
		</header>
		<div class="mui-content" id="aicVue" v-cloak>
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
						买入
					</a>
					<a class="mui-control-item" href="#item2mobile">
						卖出
					</a>
					<a class="mui-control-item" href="#item3mobile">
						收益
					</a>
					<a class="mui-control-item" href="#item4mobile">
						推广奖励
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell" v-for="item in mlist0">
										{{item.createTime}}
										<span class="mui-badge mui-badge-success" v-if="item.balanceChange >= 0">+{{item.balanceChange}}</span>
										<span class="mui-badge mui-badge-danger" v-if="item.balanceChange < 0">{{item.balanceChange}}</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell" v-for="item in mlist1">
										{{item.createTime}}
										<span class="mui-badge mui-badge-success" v-if="item.balanceChange >= 0">+{{item.balanceChange}}</span>
										<span class="mui-badge mui-badge-danger" v-if="item.balanceChange < 0">{{item.balanceChange}}</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell" v-for="item in mlist2">
										{{item.createTime}}
										<span class="mui-badge mui-badge-success" v-if="item.balanceChange >= 0">+{{item.balanceChange}}</span>
										<span class="mui-badge mui-badge-danger" v-if="item.balanceChange < 0">{{item.balanceChange}}</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div id="scroll4" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell" v-for="item in mlist3">
										{{item.createTime}}
										<span class="mui-badge mui-badge-success" v-if="item.balanceChange >= 0">+{{item.balanceChange}}</span>
										<span class="mui-badge mui-badge-danger" v-if="item.balanceChange < 0">{{item.balanceChange}}</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="team-footer">
				<span style="width: 100%;">总数: {{totalBalance}} AIC</span>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});

			var vm = new Vue({
				el: '#aicVue',
				data: {
					mlist0: [],
					mlist1: [],
					mlist2: [],
					mlist3: [],
					totalBalance: 0,
					page0: 1,
					page1: 1,
					page2: 1,
					page3: 1,
					tab: 0,
					loadFinish: true
				},
				mounted: function() {
					mui.plusReady(function() {
						mui('.mui-scroll-wrapper').scroll({
							scrollY: true, //是否竖向滚动
							scrollX: false, //是否横向滚动
							startX: 0, //初始化时滚动至x
							startY: 0, //初始化时滚动至y
							indicators: true, //是否显示滚动条
							bounce: false //是否启用回弹
						});

						//监听滚动条事件
						$(".mui-scroll-wrapper").scroll(function() {
							vm.scroll(this);
						});

						document.getElementById('slider').addEventListener('slide', function(e) {
							vm.tab = e.detail.slideNumber;
							if(vm["mlist" + e.detail.slideNumber].length > 0) {
								vm.sum();
								return;
							}
							vm["page" + vm.tab] = 1;
							vm.loadData();
						});
						var member = JSON.parse(plus.storage.getItem("member"));
						vm.loadData();
					});
				},
				methods: {
					refresh: function() {
						plus.nativeUI.showWaiting("正在加载", {
							width: '100px',
							height: '100px'
						});
						vm["page" + vm.tab] = 1;
						vm.loadData(function(result) {
							setTimeout(function() {
								plus.nativeUI.closeWaiting();
							}, 500);
							$("#scroll" + (vm.tab + 1)).scroll(function() {
								vm.scroll(this);
							});
						});
					},
					loadData: function(callback) {
						var Url = "";
						var data = null;
						switch(vm.tab) {
							case 0:
								Url = AccountingBuyList;
								data = {
									"page": vm.page0
								}
								break;
							case 1:
								Url = AccountingsellList;
								data = {
									"page": vm.page1
								}
								break;
							case 2:
								Url = AccountingProfitList;
								data = {
									"page": vm.page2
								}
								break;
							case 3:
								Url = AccountingRewardList;
								data = {
									"page": vm.page3
								}
								break;
						}
						mConsole.log("page:" + data.page);
						mui.postParam(Url, data, function(result) {
							if(result.code == 0) {
								if(vm.tab == 0) {
									if(vm.page0 == 1) {
										vm.mlist0 = result.page.list;
									} else {
										vm.mlist0 = vm.mlist0.concat(result.page.list);
									}
									vm.page0 = result.page.currPage + 1;
								} else if(vm.tab == 1) {
									if(vm.page1 == 1) {
										vm.mlist1 = result.page.list;
									} else {
										vm.mlist1 = vm.mlist1.concat(result.page.list);
									}
									vm.page1 = result.page.currPage + 1;
								} else if(vm.tab == 2) {
									if(vm.page2 == 1) {
										vm.mlist2 = result.page.list;
									} else {
										vm.mlist2 = vm.mlist2.concat(result.page.list);
									}
									vm.page2 = result.page.currPage + 1;
								} else if(vm.tab == 3) {
									if(vm.page3 == 1) {
										vm.mlist3 = result.page.list;
									} else {
										vm.mlist3 = vm.mlist3.concat(result.page.list);
									}
									vm.page3 = result.page.currPage + 1;
								}

								vm.sum();
							} else {
								mymui(result.msg);
							}
							if(undefined != callback) {
								callback(result);
							}
						});

					},
					scroll: function($this) {
						var tableview = $($this).children(".mui-scroll").children(".mui-table-view");
						var self = $this;
						var height = $(window).height();
						var tHeight = tableview.height();
						var tTop = tableview.offset().top;
						if(vm.loadFinish && ((height - tHeight == tTop + 51) || (height - tHeight == tTop + 55))) {
							vm.loadFinish = false;
							plus.nativeUI.showWaiting("正在加载", {
								width: '100px',
								height: '100px'
							});
							mConsole.log("到底了");
							vm.loadData(function(result) {
								setTimeout(function() {
									plus.nativeUI.closeWaiting();
								}, 500);
								if(result.code == 0) {
									if(result.page.currPage >= result.page.totalPage) {
										$(self).unbind('scroll');
										mymui("没有更多数据了")
									}
									vm.loadFinish = true;
								}
							});
						}

					},
					sum: function() {
						vm.totalBalance = 0;
						if(vm.tab == 0) {
							if(vm.mlist0.length > 0) {
								mui.each(vm.mlist0, function(index, item) {
									vm.totalBalance = vm.totalSum(vm.totalBalance, item.balanceChange);
								});
							}
						}
						if(vm.tab == 1) {
							if(vm.mlist1.length > 0) {
								mui.each(vm.mlist1, function(index, item) {
									vm.totalBalance = vm.totalSum(vm.totalBalance, item.balanceChange);
								});
							}
						}
						if(vm.tab == 2) {
							if(vm.mlist2.length > 0) {
								mui.each(vm.mlist2, function(index, item) {
									vm.totalBalance = vm.totalSum(vm.totalBalance, item.balanceChange);
								});
							}
						}
						if(vm.tab == 3) {
							if(vm.mlist3.length > 0) {
								mui.each(vm.mlist3, function(index, item) {
									vm.totalBalance = vm.totalSum(vm.totalBalance, item.balanceChange);
								});
							}
						}
					},
					totalSum: function(arg1, arg2) {
						var r1, r2, m;
						try {
							r1 = arg1.toString().split(".")[1].length
						} catch(e) {
							r1 = 0
						}
						try {
							r2 = arg2.toString().split(".")[1].length
						} catch(e) {
							r2 = 0
						}
						m = Math.pow(10, Math.max(r1, r2))
						return Number(((arg1 * m + arg2 * m) / m).toFixed(Math.max(r1, r2)));
					}
				}
			});
		</script>

	</body>

</html>